<template>
  <div>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      :viewBox="graphic.viewBox"
      class="image-root"
    >
      <g id="ground">
        <g v-for="value in graphic.ground" :id="`ground${value.name}`">
          <polyline
            v-if="value.type == 'polyline'"
            :points="value.points"
            :transform="value.transform ? value.transform : ''"
            class="airport"
          />
          <path
            v-if="value.type == 'path'"
            :d="value.d"
            :transform="value.transform ? value.transform : ''"
            class="airport"
          />
        </g>
      </g>

      <g id="terminal">
        <g v-for="value in graphic.terminal" :id="`terminal${value.name}`">
          <polyline
            v-if="value.type == 'polyline'"
            :points="value.points"
            :transform="value.transform ? value.transform : ''"
            class="terminal"
          />
          <path
            v-if="value.type == 'path'"
            :d="value.d"
            :transform="value.transform ? value.transform : ''"
            class="terminal"
          />
        </g>
      </g>
      <g id="control">
        <g v-for="value in graphic.control" :id="`control${value.name}`">
          <polyline
            v-if="value.type == 'polyline'"
            :points="value.points"
            :transform="value.transform ? value.transform : ''"
            class="control"
            :style="{
              stroke: colorMap[value.name]
                ? colorMap[value.name]
                : 'var(--el-text-color-primary)',
              fill: colorMap[value.name]
                ? colorMap[value.name]
                : 'var(--el-text-color-primary)',
              opacity: colorMap[value.name] ? 1 : 0,
            }"
          />
          <path
            v-if="value.type == 'path'"
            :d="value.d"
            :transform="value.transform ? value.transform : ''"
            class="control"
            :style="{
              stroke: colorMap[value.name]
                ? colorMap[value.name]
                : 'var(--el-text-color-primary)',
              fill: colorMap[value.name]
                ? colorMap[value.name]
                : 'var(--el-text-color-primary)',
              opacity: colorMap[value.name] ? 1 : 0,
            }"
          />
        </g>
      </g>

      <g id="text">
        <g v-for="seat in dataMap">
          <g
            v-if="seat != null && seat.users.length > 0"
            :transform="`translate(${seat.center.x} ${seat.center.y})`"
            class="text-group"
          >
            <text transform="translate(0 0)" class="text text-big">
              {{ seat.logicSectorCode }}
            </text>
            <text transform="translate(0 30)" class="text text-medium">
              {{ seat.frequency }}
            </text>
            <!-- <text
              :transform="`translate(${
                seat.usersNames.length * -18 + 4.5
              } 35)`"
              class="text text-small"
            >
              {{ seat.usersNames.join("  ") }}
            </text> -->
          </g>
        </g>
      </g>
    </svg>
    <!-- <pre>{{ seatStore.seatStatusTWR }}</pre> -->
    <!-- <pre>{{ dataMap }}</pre> -->
    <!-- <pre>{{ colorMap }}</pre> -->
  </div>
</template>

<script setup>
import { h, ref, computed, nextTick, watch, onMounted, onUnmounted } from "vue";
import { ElMessage } from "element-plus";
import useSeatStore from "@/store/seat.js";
import useCommonStore from "@/store/common.js";
import dayjs from "dayjs";
import graphic from "./graphic.json";

const commonStore = useCommonStore();
const seatStore = useSeatStore();

const strokeColor = computed(() => (commonStore.darkMode ? "#fff" : "#000"));
const terminalColor = computed(() => (commonStore.darkMode ? "#000" : "#fff"));

const dataMap = computed(() =>
  seatStore.seatStatus
    .filter(
      (seat) =>
        seat.orgGroup == "TWR" && seat.sectorYes && seat.sectorCodes.length > 0
    )
    .map((seat) => {
      /**
       * @users
       * [{"userName":"魏来","userId":20160032,"startTime":"2024-03-26 20:48:16","seatRole":"放单","seatRoleId":2,"seatPost":"第三岗","seatPostId":3,"qualification":"全放单","qualificationId":1,"controlLevel":"四级","controlLevelId":4},{"userName":"张宗恒","userId":20150025,"startTime":"2024-03-26 21:55:43","seatRole":"放单","seatRoleId":2,"seatPost":"带班主任岗","seatPostId":4,"qualification":"全放单","qualificationId":1,"controlLevel":"三级","controlLevelId":3},{"userName":"彭俊","userId":20050016,"startTime":"2024-03-26 23:02:04","seatRole":"放单","seatRoleId":2,"seatPost":"带班主任岗","seatPostId":4,"qualification":"全放单","qualificationId":1,"controlLevel":"二级","controlLevelId":2}]
       */
      let seatUsers = seat.users.map((user) => {
        return {
          code: user.userId,
          name: user.userName,
          post: user.seatPost,
          role: user.seatRole,
        };
      });

      // center
      let x = 0;
      let y = 0;
      let count = 0;
      graphic.control
        .filter((con) => seat.sectorCodes.includes(con.name))
        .forEach((content) => {
          let points = "";
          if (content.type == "polyline") {
            points = content.points;
          } else if (content.type == "path") {
            points = content.d;
          }
          points.split(" ").forEach((point, index) => {
            if (index % 2 === 0) {
              x += parseFloat(point);
              count++;
            } else {
              y += parseFloat(point);
            }
          });
        });
      if (count > 0) {
        let textCenter = { x: x / count, y: y / count };
        return {
          seatName: seat.seatName,
          sectorCodes: seat.sectorCodes,
          logicSectorCode: seat.logicSectorCode,
          users: seatUsers,
          usersNames: seatUsers.map((user) => user.name),
          frequency: seat.frequency,
          // defaultFrequency: seat.defaultFrequency,
          colorDark: seat.defaultColor,
          colorLight: seat.color,
          center: textCenter,
          // gates,
        };
      } else {
        return null;
      }
    })
);

const colorMap = computed(() => {
  let colors = {};
  dataMap.value.forEach((cell) => {
    if (cell) {
      cell.sectorCodes.forEach((code) => {
        colors[code] = commonStore.darkMode ? cell.colorDark : cell.colorLight;
      });
    }
  });
  return colors;
});
</script>

<style scoped>
.image-root {
  transform: scale(1.01) translate(5px, 25px);
  transition: all 0.5s ease-out;
}

.image-root:hover {
  transform: scale(1.03) translate(5px, 25px);
}
.control {
  stroke-width: 10px;
  /* opacity: 0.6; */
  transition: all 0.5s ease-in-out;
  cursor: pointer;
  fill: rgba(128, 128, 128, 1);
}

.terminal {
  stroke: var(--el-text-color-primary);
  stroke-width: 2px;
  cursor: pointer;
  /* stroke-dasharray: 5, 5; */
  fill: var(--el-text-color-primary);
  opacity: 1;
}

.airport {
  stroke: var(--el-text-color-primary);
  stroke-width: 2px;
  cursor: pointer;
  fill: var(--el-color-info);
  opacity: 0.5;
}

.text-group {
  fill: var(--el-text-color-primary);
  transition: all 0.5s ease-in-out;
  cursor: pointer;
  text-shadow: 0 0 10px var(--el-bg-color-overlay),
    0 0 3px var(--el-bg-color-overlay);
}

.text-group:hover {
  text-shadow: 0 0 100px var(--el-bg-color-overlay),
    0 0 3px var(--el-bg-color-overlay);
}

.text {
  font-size: 30px;
  font-weight: 900;
  font-family: Consolas, "Courier New", Courier, monospace;
  transition: all 0.5s ease-in-out;
}
</style>
